<template>
	<div>
		<div class="flex">
			<div class="tit_wrap">
				<div class="flex align-center"><div class="flex1 top_tit_item active">单据信息</div></div>
				<div class="flex align-center">
					<div class="flex1 top_tit_item" :class="{ active: topCurrent == 0 }" @click="topToggle(0)">首饰</div>
					<div class="flex1 top_tit_item" :class="{ active: topCurrent == 1 }" @click="topToggle(1)">饰品</div>
					<div class="flex1 top_tit_item" :class="{ active: topCurrent == 2 }" @click="topToggle(2)">赠品</div>
				</div>

				<div class="tit_item" :class="{ active: current == index }" v-for="(item, index) in options" :key="index" @click="toggle(item, index)">{{ item.label }}</div>
			</div>
			<div class="flex1" style="padding: 15px">
				<div class="ele-bg-white" style="padding: 15px">
					<zbTable ref="tableRef" :model_type="model_type" :api-fun="get_list" />
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import zbTable from '@/components/zbTable/templateIndex.vue';
import { PlusOutlined, UploadOutlined, ClearOutlined, RestOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { get_list, get_model_type } from '@/api/material/receipts_templete';

const loading = ref(false);
// 获取子组件
const tableRef = ref(null);
const current = ref(0);
const oldOptions = ref([]);
const options = ref([
	/* { label: '首饰采购模板', value: 1 },
    { label: '饰品采购模板', value: 2 },
    { label: '总店返厂模板', value: 3 },
    { label: '门店返厂模板', value: 4 },
    { label: '旧货转成品模板', value: 5 },
    { label: '分配出库模板', value: 6 },
    { label: '调拨出库模板', value: 7 },
    { label: '回仓出库模板', value: 8 } */
]);
const type = ref(1);
const model_type = ref(null);
const topCurrent = ref(0);
const midOptions = ref([]);
const midCurrent = ref(0);
const rightCurrent = ref(0);
const rightOptions = ref([{ label: '基本信息', value: 'sku_info' }, { label: '主石信息', value: 'main_stone' }, { label: '副石信息', value: 'vice_stone' }]);

const info = reactive({
	receipts_type: '',
	goods_category_code: '',
	type: rightOptions.value[0].value,
	page: 1
});

onMounted(() => {
	/* get_list({ page: 1, page_size: 10 }).then(async (res) => {
      console.log(res.searchData[0].options);
      await res.searchData[0].options.forEach((item) => {
        oldOptions.value.push({
          label: item.label,
          value: item.key
        });
      });
      options.value = oldOptions.value;
      if (options.value.length > 0) {
        model_type.value = options.value[0].value;
      }
    }); 
	get_goods_category_list({ page: 1, page_size: 9999 }).then(res => {
		console.log(res);
		res.forEach(item => {
			midOptions.value.push({
				label: item.name,
				value: item.code
			});
			if (midOptions.value.length > 0) {
				info.goods_category_code = midOptions.value[0].value;
			}
		});
	});*/
	getOptions();
});
const getOptions = ()=>{
	get_model_type({ page: 1, page_size: 9999, type: type.value }).then(res => {
		console.log(res);
		options.value = [];
		res.forEach(item=>{
			options.value.push({
				label:item.value,
				value:item.label
			})
		})
		if (options.value.length > 0) {
			model_type.value = options.value[0].value;
		}
	});
}
const toggle = (item, index) => {
	current.value = index;
	tableRef.value.changeType(item.value);
};
const topToggle = (index) => {
	console.log(index)
	type.value = Number(index)+1;
	topCurrent.value = Number(index);
	getOptions();
};
</script>
